<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="/src/bootstrap-3.3.7-dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/src/css/main.css">
    <link rel="stylesheet" type="text/css" href="/src/css/addOrder.css">
</head>


<body>
    <div class="wrapper" id="addOrderVue">
        <embed class="embed-wrapper" src="../top.html" />
        <div class="content-wrapper">
            <!-- <p class="text-right">
                <button type="button" class="btn btn-success goNext" onClick="fabricChoose()">下一步</button>
            </p> -->
            <ol class="breadcrumb">
                <span>请选择分类：</span>
            </ol>
            <div class="mian-wrapper">
                <div class="tree-pane">
                    <ul class="material-group">
                        <li :class="activeClass1 == '10000' ? 'active':''" id="10000" @click="showNodes('10000','梭织服装',1)">梭织服换
                        </li>
                        <li>针织服装</li>
                        <li>裘皮</li>
                        <li>皮革/仿皮</li>
                    </ul>
                    <div class="treeNodesPane" id="treeNodesPane">
                        <!-- 二级 -->
                        <ul>
                            <li v-for="(level2li,menuCode) in level2List"
                                :class="activeClass2 == level2li.menuCode ? 'active':''" :id=menuCode
                                @click='showNodes(level2li.menuCode,level2li.menuName,2)'>{{level2li.menuName}}</li>
                        </ul>
                        <!-- 三级 -->
                        <ul>
                            <li v-for="(level3li,menuCode) in level3List"
                                :class="activeClass3 == level3li.menuCode ? 'active':''" :id=menuCode
                                @click='showNodes(level3li.menuCode,level3li.menuName,3)'>{{level3li.menuName}}</li>
                        </ul>
                        <!-- 四级 -->
                        <ul>
                            <li v-for="(level4li,menuCode) in level4List"
                                :class="activeClass4 == level4li.menuCode ? 'active':''" :id=menuCode
                                @click='showNodes(level4li.menuCode,level4li.menuName,4)'>{{level4li.menuName}}</li>
                        </ul>
                    </div>
                </div>
                <!-- <div class="data-show">
                    <ul class="row list-wrap">
                        <li class="col-md-3 list-item" data-id="31">

                            <a href="#" class="thumbnail">
                                <img src="/src/images/niukou.jpg" alt="点击">
                            </a>
                            <p>衬衫</p>

                        </li>
                    </ul>

                </div> -->
            </div>
        </div>
        <embed class="embed-wrapper" src="../footer.html">
    </div>

</body>
<script src="/src/js/jquery.min.2.1.4.js"></script>

<script src="/src/js/common.js"></script>
<script src="/src/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>

    var addOrderVue = new Vue({
        el: '#addOrderVue',
        data:function() {
            return {
                level2List: [],//一级列表
                level3List: [],//二级列表
                level4List: [],//三级列表
                level1Choose: '',//大类选择 梭织服饰，针织服饰，裘皮，皮革
                level2Choose: '',//男装，女装，童装
                level3Choose: '',//上装，下装，套装
                level4Choose: '',//具体款式
                activeClass1: -1,
                activeClass2: -1,
                activeClass3: -1,
                activeClass4: -1,
            }
        },
        methods: {
            // 菜单树展开
            showNodes:function(menuCode,menuName,level) {
                var listStr = '';
                var tempArray = [];
                for (let i = 0; i < treeData.length; i++) {
                    const tree = treeData[i];
                    if (tree.parentCode === menuCode) {//判断是不是当前节点的子节点
                        tempArray.push(tree);
                    }
                }
                switch (level) {
                    case 1:
                        this.level2List = [];//先清空
                        this.level3List = [];//先清空
                        this.level4List = [];//先清空
                        this.level2List = tempArray;//再放进去新的列表数据
                        this.activeClass1 = menuCode;
                        this.level1Choose = menuName;
                        break;
                    case 2:
                        this.level3List = [];//先清空
                        this.level4List = [];//先清空
                        this.level3List = tempArray;//再放进去新的列表数据
                        this.activeClass2 = menuCode;
                        this.level2Choose = menuName;
                        break;
                    case 3:
                        this.level4List = [];//先清空
                        this.level4List = tempArray;//再放进去新的列表数据
                        this.activeClass3 = menuCode;
                        this.level3Choose = menuName;
                        break;
                        case 4:
                        this.level4Choose = menuName;
                        this.chooseThis();
                    default:
                        break;
                }
            },
            chooseThis:function() {
                window.location.href = "material.html?level1Choose=" + this.level1Choose+"&level2Choose="+this.level2Choose
                    +"&level3Choose="+this.level3Choose+'&level4Choose='+this.level4Choose;
            }

        },

    });


    var treeData = [
        {
            id: 10000,
            menuName: '梭织服装',
            menuCode: '10000',
            inedx: 1,//所在层级
        },
        {
            id: 11000,
            menuName: '男装',
            menuCode: '11000',
            index: 2,//所在层级,
            parentCode: '10000'
        },

        {
            id: 11100,
            menuName: '上装',
            menuCode: '11100',
            index: 3,//所在层级
            parentCode: '11000'
        },
        {
            id: 11101,
            menuName: '衬衫',
            menuCode: '11101',
            index: 4,//所在层级
            parentCode: '11100'
        },
        {
            id: 11102,
            menuName: 'T恤/文化衫',
            menuCode: '11102',
            index: 4,//所在层级
            parentCode: '11100'
        },
        {
            id: 11103,
            menuName: '夹克',
            menuCode: '11103',
            index: 4,//所在层级
            parentCode: '11100'
        },
        {
            id: 11104,
            menuName: '风衣',
            menuCode: '11104',
            index: 4,//所在层级
            parentCode: '11100'
        },
        {
            id: 11105,
            menuName: '大衣',
            menuCode: '11105',
            index: 4,//所在层级
            parentCode: '11100'
        },
        {
            id: 11106,
            menuName: '工装',
            menuCode: '11106',
            index: 4,//所在层级
            parentCode: '11100'
        },
        {
            id: 11107,
            menuName: '西装',
            menuCode: '11107',
            index: 4,//所在层级
            parentCode: '11100'
        },
        {
            id: 11108,
            menuName: '运动服',
            menuCode: '11108',
            index: 4,//所在层级
            parentCode: '11100'
        },
        {
            id: 11109,
            menuName: '棉衣/羽绒服',
            menuCode: '11109',
            index: 4,//所在层级
            parentCode: '11100'
        },
        {
            id: 11110,
            menuName: '睡袍',
            menuCode: '11110',
            index: 4,//所在层级
            parentCode: '11100'
        },
        {
            id: 11111,
            menuName: '西装背心',
            menuCode: '11111',
            index: 4,//所在层级
            parentCode: '11100'
        },

        {
            id: 11200,
            menuName: '下装',
            menuCode: '11200',
            index: 3,//所在层级
            parentCode: '11000'
        },
        {
            id: 11201,
            menuName: '休闲裤',
            menuCode: '11201',
            index: 4,
            parentCode: '11200'
        },
        {
            id: 11202,
            menuName: '牛仔裤',
            menuCode: '11202',
            index: 4,
            parentCode: '11200'
        },
        {
            id: 11203,
            menuName: '运动裤',
            menuCode: '11203',
            index: 4,
            parentCode: '11200'
        },

        {
            id: 11204,
            menuName: '工装裤',
            menuCode: '11204',
            index: 4,
            parentCode: '11200'
        },
        {
            id: 11205,
            menuName: '沙滩裤',
            menuCode: '11205',
            index: 4,
            parentCode: '11200'
        },
        {
            id: 11206,
            menuName: '西裤',
            menuCode: '11206',
            index: 4,
            parentCode: '11200'
        },
        {
            id: 11207,
            menuName: '背带裤',
            menuCode: '11207',
            index: 4,
            parentCode: '11200'
        },
        {
            id: 11300,
            menuName: '套装',
            menuCode: '11300',
            index: 3,//所在层级
            parentCode: '11000'
        },
        {
            id: 11301,
            menuName: '工作服',
            menuCode: '11301',
            index: 4,
            parentCode: '11300'
        },
        {
            id: 11302,
            menuName: '运动服',
            menuCode: '11302',
            index: 4,
            parentCode: '11300'
        },
        {
            id: 11303,
            menuName: '西装套装',
            menuCode: '11303',
            index: 4,
            parentCode: '11300'
        },
        {
            id: 11304,
            menuName: '家居服',
            menuCode: '11304',
            index: 4,
            parentCode: '11300'
        },


        {
            id: '12000',
            menuName: '女装',
            menuCode: '12000',
            index: 2,//所在层级
            parentCode: '10000'
        },
        {
            id: 12100,
            menuName: '上装',
            menuCode: '12100',
            index: 3,
            parentCode: '12000'
        },
        {
            id: 12101,
            menuName: '女时装',
            menuCode: '12101',
            index: 4,
            parentCode: '12100'
        },
        {
            id: 12102,
            menuName: '衬衫',
            menuCode: '12102',
            index: 4,
            parentCode: '12100'
        },
        {
            id: 12103,
            menuName: 'T恤/文化衫',
            menuCode: '12103',
            index: 4,
            parentCode: '12100'
        },
        {
            id: 12104,
            menuName: '夹克',
            menuCode: '12104',
            index: 4,
            parentCode: '12100'
        },
        {
            id: 12105,
            menuName: '风衣',
            menuCode: '12105',
            index: 4,
            parentCode: '12100'
        },
        {
            id: 12106,
            menuName: '大衣',
            menuCode: '12106',
            index: 4,
            parentCode: '12100'
        },
        {
            id: 12107,
            menuName: '工装',
            menuCode: '12107',
            index: 4,
            parentCode: '12100'
        },
        {
            id: 12108,
            menuName: '西装',
            menuCode: '12108',
            index: 4,
            parentCode: '12100'
        },
        {
            id: 12109,
            menuName: '运动服',
            menuCode: '12109',
            index: 4,
            parentCode: '12100'
        },
        {
            id: 12110,
            menuName: '棉衣/羽绒服',
            menuCode: '12110',
            index: 4,
            parentCode: '12100'
        },
        {
            id: 12111,
            menuName: '睡裙',
            menuCode: '12111',
            index: 4,
            parentCode: '12100'
        },
        {
            id: 12112,
            menuName: '连衣裙',
            menuCode: '12112',
            index: 4,
            parentCode: '12100'
        },
        {
            id: 12113,
            menuName: '礼服',
            menuCode: '12113',
            index: 4,
            parentCode: '12100'
        },
        {
            id: 12200,
            menuName: '下装',
            menuCode: '12200',
            index: 3,
            parentCode: '12000'
        },
        {
            id: 12201,
            menuName: '短裙',
            menuCode: '12201',
            index: 4,
            parentCode: '12200'
        },
        {
            id: 12202,
            menuName: '休闲裤',
            menuCode: '12202',
            index: 4,
            parentCode: '12200'
        },
        {
            id: 12203,
            menuName: '牛仔裤',
            menuCode: '12203',
            index: 4,
            parentCode: '12200'
        },
        {
            id: 12204,
            menuName: '运动裤',
            menuCode: '12204',
            index: 4,
            parentCode: '12200'
        },
        {
            id: 12205,
            menuName: '工装裤',
            menuCode: '12205',
            index: 4,
            parentCode: '12200'
        },
        {
            id: 12206,
            menuName: '沙滩裤',
            menuCode: '12206',
            index: 4,
            parentCode: '12200'
        },
        {
            id: 12207,
            menuName: '西裤',
            menuCode: '12207',
            index: 4,
            parentCode: '12200'
        },
        {
            id: 12208,
            menuName: '背带裤',
            menuCode: '12208',
            index: 4,
            parentCode: '12200'
        }
        //                 {
        //                     id: 12300,
        //                     menuName: '套装',
        //                     menuCode: '12300',
        //                     index: 3,
        //                     children: [
        //                         {
        //                             id: 12301,
        //                             menuName: '工作服',
        //                             menuCode: '12301',
        //                             index: 4
        //                         },
        //                         {
        //                             id: 12304,
        //                             menuName: '运动服',
        //                             menuCode: '12304',
        //                             index: 4
        //                         },
        //                         {
        //                             id: 12305,
        //                             menuName: '西服套装',
        //                             menuCode: '12305',
        //                             index: 4
        //                         },
        //                         {
        //                             id: 12306,
        //                             menuName: '家居服',
        //                             menuCode: '12306',
        //                             index: 4
        //                         },
        //                         {
        //                             id: 12307,
        //                             menuName: '时装套装',
        //                             menuCode: '12307',
        //                             index: 4
        //                         },
        //                     ]
        //                 },
        //             ]
        //         },
        //         {
        //             id: 13000,
        //             menuName: '童装',
        //             menuCode: '13000',
        //             index: 2,//所在层级
        //             children: [
        //                 {
        //                     id: 13100,
        //                     menuName: '上装',
        //                     menuCode: '13100',
        //                     index: 3,
        //                     children: [
        //                         {
        //                             id: 13101,
        //                             menuName: '衬衫',
        //                             menuCode: '13101',
        //                             index: 4
        //                         },
        //                         {
        //                             id: 13102,
        //                             menuName: 'T恤/文化衫',
        //                             menuCode: '13102',
        //                             index: 4
        //                         },
        //                         {
        //                             id: 13103,
        //                             menuName: '夹克',
        //                             menuCode: '13103',
        //                             index: 4
        //                         },
        //                         {
        //                             id: 13104,
        //                             menuName: '风衣',
        //                             menuCode: '13104',
        //                             index: 4
        //                         },
        //                         {
        //                             id: 13105,
        //                             menuName: '大衣',
        //                             menuCode: '13105',
        //                             index: 4
        //                         },
        //                         {
        //                             id: 13106,
        //                             menuName: '工装',
        //                             menuCode: '13106',
        //                             index: 4
        //                         },
        //                         {
        //                             id: 13107,
        //                             menuName: '西装',
        //                             menuCode: '13107',
        //                             index: 4
        //                         },
        //                         {
        //                             id: 13108,
        //                             menuName: '运动服',
        //                             menuCode: '13108',
        //                             index: 4
        //                         },
        //                         {
        //                             id: 13109,
        //                             menuName: '棉衣/羽绒服',
        //                             menuCode: '13109',
        //                             index: 4
        //                         },
        //                         {
        //                             id: 13110,
        //                             menuName: '睡裙',
        //                             menuCode: '13110',
        //                             index: 4
        //                         },
        //                         {
        //                             id: 13111,
        //                             menuName: '连衣裙',
        //                             menuCode: '13111',
        //                             index: 4
        //                         },
        //                         {
        //                             id: 13112,
        //                             menuName: '礼服',
        //                             menuCode: '13112',
        //                             index: 4
        //                         },
        //                     ]
        //                 },
        //                 {
        //                     id: 13200,
        //                     menuName: '下装',
        //                     menuCode: '13200',
        //                     index: 3,
        //                     children: [
        //                         {
        //                             id: 13201,
        //                             menuName: '短裙',
        //                             menuCode: '13201',
        //                             index: 4
        //                         },
        //                         {
        //                             id: 13202,
        //                             menuName: '休闲裤',
        //                             menuCode: '13202',
        //                             index: 4
        //                         },
        //                         {
        //                             id: 13203,
        //                             menuName: '牛仔裤',
        //                             menuCode: '13203',
        //                             index: 4
        //                         },
        //                         {
        //                             id: 13204,
        //                             menuName: '运动裤',
        //                             menuCode: '13204',
        //                             index: 4
        //                         },
        //                         {
        //                             id: 13205,
        //                             menuName: '工装裤',
        //                             menuCode: '13205',
        //                             index: 4
        //                         },
        //                         {
        //                             id: 13206,
        //                             menuName: '沙滩裤',
        //                             menuCode: '13206',
        //                             index: 4
        //                         },
        //                         {
        //                             id: 13207,
        //                             menuName: '西裤',
        //                             menuCode: '13207',
        //                             index: 4
        //                         },
        //                         {
        //                             id: 13208,
        //                             menuName: '背带裤',
        //                             menuCode: '13208',
        //                             index: 4
        //                         }
        //                     ]
        //                 },
        //                 {
        //                     id: 13300,
        //                     menuName: '套装',
        //                     menuCode: '13300',
        //                     index: 3,

        //                     children: [
        //                         {
        //                             id: 13301,
        //                             menuName: '工作服',
        //                             menuCode: '13301',
        //                             index: 4
        //                         },
        //                         {
        //                             id: 13302,
        //                             menuName: '运动服',
        //                             menuCode: '13302',
        //                             index: 4
        //                         },
        //                         {
        //                             id: 13303,
        //                             menuName: '西服套装',
        //                             menuCode: '13303',
        //                             index: 4
        //                         },
        //                         {
        //                             id: 13304,
        //                             menuName: '家居服',
        //                             menuCode: '13304',
        //                             index: 4
        //                         },
        //                         {
        //                             id: 13305,
        //                             menuName: '时装套装',
        //                             menuCode: '13305',
        //                             index: 4
        //                         },
        //                     ]
        //                 },
        //             ]
        //         }
        //     ]
        // },
        // {
        //     id: 2,
        //     menuName: '针织服装',
        //     menuCode: '20',
        //     inedx: 1,
        //     children: [
        //         {
        //             id: 5,
        //             menuName: '男装',
        //             menuCode: '1010',
        //         },
        //         {
        //             id: 6,
        //             menuName: '女装',
        //             menuCode: '1010',
        //         },
        //         {
        //             id: 7,
        //             menuName: '童装',
        //             menuCode: '1010',
        //         }
        //     ]
        // },
        // {
        //     id: 3,
        //     menuName: '皮革/仿皮',
        //     menuCode: '30',
        //     inedx: 1,
        //     children: [
        //         {
        //             id: 5,
        //             menuName: '男装',
        //             menuCode: '1010',
        //         },
        //         {
        //             id: 6,
        //             menuName: '女装',
        //             menuCode: '1010',
        //         },
        //         {
        //             id: 7,
        //             menuName: '童装',
        //             menuCode: '1010',
        //         }
        //     ]
        // },
        // {
        //     id: 4,
        //     menuName: '裘皮',
        //     menuCode: '40',
        //     inedx: 1,
        //     children: [
        //         {
        //             id: 5,
        //             menuName: '男装',
        //             menuCode: '1010',
        //         },
        //         {
        //             id: 6,
        //             menuName: '女装',
        //             menuCode: '1010',
        //         },
        //         {
        //             id: 7,
        //             menuName: '童装',
        //             menuCode: '1010',
        //         }
        //     ]
        // },
    ];

    var getViewportOffset = function () {
        if (window.innerWidth) {
            return {
                w: window.innerWidth,
                h: window.innerHeight
            }
        } else {
            if (document.compatMode == "BackCompat") {
                return {
                    w: document.body.clientWidth,
                    h: document.body.clientHeight
                }
            } else {
                return {
                    w: document.documentElement.clientWidth,
                    h: document.documentElement.clientHeight

                }
            }

        }
    }
    // 初始化页面高度
    $(function () {
        var viewHeight = getViewportOffset().h;
        $('.content-wrapper').css('min-height', viewHeight - 300 + 'px');
    })
</script>

</html>